<template>
  <el-card class="m-b-20">
    <el-form ref="passwordForm" :model="user_" :rules="rules" label-width="120px">
      <el-tooltip v-model="capsTooltip_0" content="大写锁定已打开" placement="right" manual>
        <el-form-item label="旧密码" prop="oldPassword">
          <el-input
            :key="passwordType_0"
            ref="oldPassword"
            v-model="user_.oldPassword"
            :type="passwordType_0"
            name="oldPassword"
            tabindex="2"
            autocomplete="off"
            @keyup.native="checkCapslock0"
            @blur="capsTooltip_0 = false"
          >
            <template slot="suffix">
              <span class="svg-container" @click="showPwd0">
                <svg-icon :icon-class="passwordType_0 === 'password' ? 'eye' : 'eye-open'" />
              </span>
            </template>
          </el-input>
        </el-form-item>
      </el-tooltip>
      <el-tooltip v-model="capsTooltip_1" content="大写锁定已打开" placement="right" manual>
        <el-form-item label="新密码" prop="newPassword">
          <el-input
            :key="passwordType_1"
            ref="newPassword"
            v-model="user_.newPassword"
            :type="passwordType_1"
            name="newPassword"
            tabindex="3"
            autocomplete="off"
            @keyup.native="checkCapslock1"
            @blur="capsTooltip_1 = false"
          >
            <template slot="suffix">
              <span class="svg-container" @click="showPwd1">
                <svg-icon :icon-class="passwordType_1 === 'password' ? 'eye' : 'eye-open'" />
              </span>
            </template>
          </el-input>
        </el-form-item>
      </el-tooltip>
      <el-tooltip v-model="capsTooltip_2" content="大写锁定已打开" placement="right" manual>
        <el-form-item label="确认密码" prop="confirmPassword">
          <el-input
            :key="passwordType_2"
            ref="confirmPassword"
            v-model="user_.confirmPassword"
            :type="passwordType_2"
            name="confirmPassword"
            tabindex="4"
            autocomplete="off"
            @keyup.native="checkCapslock2"
            @blur="capsTooltip_2 = false"
          >
            <template slot="suffix">
              <span class="svg-container" @click="showPwd2">
                <svg-icon :icon-class="passwordType_2 === 'password' ? 'eye' : 'eye-open'" />
              </span>
            </template>
          </el-input>
        </el-form-item>
      </el-tooltip>
      <el-form-item>
        <el-button type="primary" icon="el-icon-check" :loading="loading" @click="onSubmit">保 存</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
import { updatePwd } from '@/api/system/user'
import { validatePassword } from '@/utils/validate'

export default {
  name: 'UserRepassword',
  props: {
    user: {
      type: Object,
      default: () => {
        return {
          userId: undefined
        }
      }
    }
  },
  data() {
    const validIdentical = (rule, value, callback) => {
      if (value && value === this.user_.newPassword) {
        callback()
      }
      callback(new Error(rule.message))
    }

    return {
      user_: {
        userId: undefined,
        oldPassword: '',
        newPassword: '',
        confirmPassword: ''
      },
      rules: {
        oldPassword: [
          { required: true, trigger: 'blur', message: '请输入旧密码' }
        ],
        newPassword: [
          { required: true, trigger: 'blur', message: '请输入新密码' },
          { validator: validatePassword, trigger: 'blur' }
        ],
        confirmPassword: [
          { required: true, trigger: 'blur', message: '请输入确认密码' },
          { validator: validIdentical, trigger: 'blur', message: '与新密码不一致' }
        ]
      },
      loading: false,
      passwordType_0: 'password',
      capsTooltip_0: false,
      passwordType_1: 'password',
      capsTooltip_1: false,
      passwordType_2: 'password',
      capsTooltip_2: false
    }
  },
  created() {
    this.user_.userId = this.user.userId
  },
  methods: {
    checkCapslock0(e) {
      const { key } = e
      this.capsTooltip_0 = key && key.length === 1 && (key >= 'A' && key <= 'Z')
    },
    checkCapslock1(e) {
      const { key } = e
      this.capsTooltip_1 = key && key.length === 1 && (key >= 'A' && key <= 'Z')
    },
    checkCapslock2(e) {
      const { key } = e
      this.capsTooltip_2 = key && key.length === 1 && (key >= 'A' && key <= 'Z')
    },
    showPwd0() {
      if (this.passwordType_0 === 'password') {
        this.passwordType_0 = ''
      } else {
        this.passwordType_0 = 'password'
      }
      this.$nextTick(() => {
        this.$refs.oldPassword.focus()
      })
    },
    showPwd1() {
      if (this.passwordType_1 === 'password') {
        this.passwordType_1 = ''
      } else {
        this.passwordType_1 = 'password'
      }
      this.$nextTick(() => {
        this.$refs.newPassword.focus()
      })
    },
    showPwd2() {
      if (this.passwordType_2 === 'password') {
        this.passwordType_2 = ''
      } else {
        this.passwordType_2 = 'password'
      }
      this.$nextTick(() => {
        this.$refs.confirmPassword.focus()
      })
    },
    onSubmit() {
      this.$refs.passwordForm.validate(valid => {
        if (valid) {
          this.loading = true
          updatePwd(this.user_.userId, this.user_).then(response => {
            this.loading = false
            this.$modal.msgSuccess(response.msg)
          }).catch(() => {
            this.loading = false
          })
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.box-center {
  margin: 0 auto;
  display: table;
}

.text-muted {
  color: #777;
}

.user-profile {
  .user-name {
    font-weight: bold;
  }

  .box-center {
    padding-top: 10px;
  }

  .user-role {
    padding-top: 10px;
    font-weight: 400;
    font-size: 14px;
  }

  .box-social {
    padding-top: 30px;

    .el-table {
      border-top: 1px solid #dfe6ec;
    }
  }

  .user-follow {
    padding-top: 20px;
  }
}

.user-bio {
  margin-top: 20px;
  color: #606266;

  span {
    padding-left: 4px;
  }

  .user-bio-section {
    font-size: 14px;
    padding: 15px 0;

    .user-bio-section-header {
      border-bottom: 1px solid #dfe6ec;
      padding-bottom: 10px;
      margin-bottom: 10px;
      font-weight: bold;
    }
  }
}
</style>
